<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 1423px;
            margin: auto;
        }
        .main {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top"><img src="images/top.png" alt=""></div>
    <div class="nav"><img src="images/nav.png" alt=""></div>
    <div class="main"><img src="images/main.png" alt=""></div>
    <script>
        //获取元素
        var top1 = document.querySelector('.top');
        var nav = document.querySelector('.nav');
        var main = document.querySelector('.main');

        //注册事件
        window.onscroll = function(){
            if(window.pageYOffset >= top1.offsetHeight) {
                nav.style.position = 'fixed'
                nav.style.top = 0;
                nav.style.left = '50%';
                nav.style.marginLeft = -nav.offsetWidth/2+'px';
                main.style.marginTop = nav.offsetHeight + 'px';
            }else {
                nav.style = ''
                main.style.marginTop = '';

            }
        }
    </script>
    <script src='../jquery-1.12.4.js'></script>
    <script>
        $(function(){
            // $(window).on('scroll',function(){
            //     if($(window).scrollTop()>=$('.top').height()){
            //         $('.nav').css({position:'fixed',top:0,left:'50%','margin-left':-$('.nav').width()/2}).next().css('margin-top',$('.nav').height())
            //     }else{
            //         $('.nav').css('position','static').css('margin','auto').next().css('margin-top',0)
            //     } 
            // })
        })
    </script>
</body>
</html>